﻿@{
    ViewData["Title"] = "Test";
}

<link href='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js'></script>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="input-group">
                <div class="input-group-append">
                    <select class="custom-select" id="setheme">
                        <optgroup label="Theme">
                            <option value="vs">Visual Studio</option>
                            <option value="vs-dark">Visual Studio Dark</option>
                            <option value="hc-black">High Contrast Dark</option>
                        </optgroup>
                    </select>
                </div>
                <div class="input-group-append">
                    <select class="custom-select" id="selanguage">
                        <optgroup label="Language"></optgroup>
                    </select>
                </div>
                <div class="input-group-append">
                    <button class="btn btn-warning d-none" id="btnRun" title="运行全局对象：window.ee">运行</button>
                </div>
                <div class="input-group-prepend pt-2 pl-3 text-muted">
                    自动保存，可拖拽文件打开
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-md-12">
            <div id="editor" class="border overflow-hidden position-relative" style="height:500px">
            </div>
        </div>
    </div>
</div>

<script src='https://cdn.jsdelivr.net/npm/monaco-editor@0.22.3/min/vs/loader.js'></script>

<script>
    require.config({
        paths: {
            vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.22.3/min/vs'
        },
        'vs/nls': { availableLanguages: { '*': 'zh-cn' } }
    });
</script>

<script>
    var editor;
    require(['vs/editor/editor.main'], function () {
        var modesIds = monaco.languages.getLanguages().map(lang => lang.id).sort();

        var te = $("#editor"), selang = $('#selanguage'),
            languagehtm = [];
        for (var i = 0; i < modesIds.length; i++) {
            var mo = modesIds[i];
            languagehtm.push('<option>' + mo + '</option>');
        }
        selang.children()[0].innerHTML = languagehtm.join('');

        editor = monaco.editor.create(te[0], {
            value: 'console.log("Hello world!");',
            language: 'javascript',
            automaticLayout: true,
            theme: 'vs',
            scrollbar: {
                verticalScrollbarSize: 6,
                horizontalScrollbarSize: 6
            },
            minimap: {
                _enabled: false
            }
        });
    });
</script>
